<template>
<div class="page">
  <nav-top title="订单详情"></nav-top>
  <xl-footer class="jcfe">
    <div class="footer-content">
    <template v-if="orderInfo.type==1">
      <btn-cancel></btn-cancel>
      <btn-pay></btn-pay>
    </template>
    <template v-else>
      <btn-payback></btn-payback>
      <btn-logistics :id="orderInfo.id"></btn-logistics>
    </template>
    </div>
  </xl-footer>
  <page-content>
    <xl-content>
      <div class="content-block space-between">
      <span>
        订单号:{{orderInfo.trade_no}}
      </span>
      <span class="ora">{{orderInfo.type==1?'待付款':'已付款'}}</span>
      </div>
    </xl-content>
      <address-list-item :data='address'></address-list-item>
    <order-breviary :data='info' inOrderInfo></order-breviary>
    <xl-content>
      <div class="content-column bb">
        <span class="title">发票开具</span>
        <span class="text">发票抬头:{{orderInfo.invoice_head}}</span>
      </div>
      <div class="content-column bb">
        <span class="title">补充说明</span>
        <span class="text">{{orderInfo.remark}}</span>
      </div>
    </xl-content>
    <xl-content>
      <div class="content-block space-between">
        <span>商品总额</span>
        <span class="ora">￥{{orderInfo.total_prices|toFixed2}}</span>
      </div>
      <div class="content-block space-between bb">
      <span>运费</span>
      <span class="ora">￥{{orderInfo.express_fee|toFixed2}}</span>
      </div>
      <div class="content-block jcfe total">
        <span>实付款:</span>
        <span class="ora">￥{{orderInfo.total_prices+orderInfo.express_fee|toFixed2}}</span>
      </div>
    </xl-content>
  </page-content>
</div>
</template>
<script>
import navTop from '@c/header/navTop'
import pageContent from '@c/pagecontent'
import xlContent from '@c/content'
import AddressListItem from '@c/addressList/addressListItem'
import orderBreviary from '@c/orderBreviary'
import xlFooter from '@c/footer.vue'
import btnPay from './btn-pay'
import btnCancel from './btn-cancel-order'
import btnPayback from './btn-pay-back'
import btnLogistics from './btn-logistics'
import {
  getOrderInfo
} from '../../config/api'
// const getOrderInfo =require('../../config/api.js').getOrderInfo
export default {
  name: 'orderInfo',
  components: {
    navTop,
    pageContent,
    xlContent,
    AddressListItem,
    orderBreviary,
    xlFooter,
    btnPay,
    btnCancel,
    btnPayback,
    btnLogistics
  },
  // props:,
  data() {
    return {
      orderInfo: {
        trade_no:'',
        name:'',
        phone:0,
        address:'',
        pic:'',
        time:0,
        title:'',
        price:0
      }
    }
  },
  computed:{
    address(){
      let data =this.orderInfo
      return {
        ex_name:data.name,
        ex_phone:data.phone,
        ex_address:data.address
      }
    },
    info(){
      let data =this.orderInfo
      return {
        pic:data.pic,
        time:data.time,
        title:data.title,
        goods_prices:data.price
      }
    }
  },
  beforeRouteEnter: (to, from, next) => {
    next(vm => {
      getOrderInfo({
        user_id: vm.$store.state.user_id,
        order_id: to.params.id
      },res => {
        console.log(res)
          vm.orderInfo = res.data.data.itemList
      })
    })
  }
}

</script>
<style lang='scss' scoped>
.total{
  padding: 0 3%;
  font-size: 30px; /*px*/
  line-height: 90px; /*px*/
  color:#1a1a1a;
  span:not(:first-child){
    font-size:40px; /*px*/
  }
}
</style>